<template>
    <div class="Detail">
        <!-- 非表单头部 -->
        <div class="select_top" v-if="true">
            <!-- 跳转到首页 -->
            <!-- <router-link to="/"> -->
                <span class="arrow" @click="$router.go(-1)"></span>
            <!-- </router-link> -->
            <!-- 中间隐藏-->
        
        </div>
        <!-- tab -->
        <van-tabs v-model="active" scrollspy sticky @click="onClick">
            <van-tab title="商品" >
                <!-- 商品预览 -->
                <van-swipe @change="onChange">
                    <!-- 模板字符串加单引号 -->
                    <van-swipe-item>
                        <img :src="arrPre.img1" alt="">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img :src="arrPre.img2" alt="">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img :src="arrPre.img3" alt="">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img :src="arrPre.img4" alt="">
                    </van-swipe-item>
                    <template #indicator>
                        <div class="custom-indicator">{{ current + 1 }}/4</div>
                    </template>
                </van-swipe>
            </van-tab>
            <!-- 详情 -->
            <van-tab title="详情">
                <div class="info">
                    <div class="price">
                        <p>
                            ￥
                            <span>{{ arrPre.originprice }}</span>
                        </p>
                        <div>
                            <p>
                                <img src="//jstatic.3.cn/static/icon_price_reduce.939a24f1.png?__inline" alt="">
                                <span>降价提醒</span>
                            </p>
                            <p>
                                <img src="//jstatic.3.cn/static/icon_favour_jd.4e212715.png?__inline" alt="">
                                <span>收藏</span>
                            </p>
                        </div>
                    </div>
                    <div class="txt bx">
                        <img src="//img12.360buyimg.com/img/s120x36_jfs/t1/135306/37/4469/1206/5f0fcd7dE1b53409c/955413e61c6ce56d.png"
                            alt="">
                        <span>年轻人的潮流好物</span>
                        <span>
                            销量:{{ arrPre.sales }}
                        </span>
                    </div>
                    <div class="txt2 bx">
                        <img src="//img12.360buyimg.com/img/s48x26_jfs/t1/134936/19/4552/1458/5f0fd238E688140ef/dc3f7acfff4a1ee7.png"
                            alt="">
                        <span>{{ arrPre.proname }}</span>
                    </div>
                    <div class="rank bx">
                        <img src="https://img10.360buyimg.com/img/jfs/t1/20724/31/20118/5100/6386d180Ef7435661/b73a0d4e3f653a22.png"
                            alt="">
                        <span>3000元以上日韩表热卖榜第5名</span>
                        <img src="https://m.360buyimg.com/rank/jfs/t1/206038/6/18674/1888/61bc390aE2a46f19b/321efee30a5a8e65.png/"
                            alt="">
                    </div>
                </div>
            </van-tab>
            <!-- 地址 -->
            <van-tab title="地址">
                <div class="address">
                    <div class="bx">
                        <van-cell is-link title="送至" @click="show = true" class="pop">
                            <span>西安市雁塔区</span>
                        </van-cell>
                        <!-- 自定义 -->
                        <van-action-sheet v-model="show" title="选择地址">
                            <div class="area">
                                <van-radio-group v-model="radio">
                                    <van-radio name="1" checked-color="#ee0a24">雁塔区</van-radio>
                                    <van-radio name="2" checked-color="#ee0a24">高新区</van-radio>
                                </van-radio-group>
                                <van-button round color="linear-gradient(to right, #ff6034, #ee0a24)">
                                    新增其他地址
                                </van-button>
                            </div>
                        </van-action-sheet>
                    </div>
                </div>
            </van-tab>

            <!-- 猜你喜欢 -->
            <van-tab title="猜你喜欢">
                <div class="like">
                    <p>猜你喜欢</p>
                    <div class="list bx">
                        <!-- 猜你喜欢数据传给list子组件重新显示 -->
                        <List v-for="(v, index) in arrList2" :key="index" :img1="v.img1" :proname="v.proname"
                            :originprice="v.originprice" :sales="v.sales" @click.native="goDetail2(v)"></List>
                    </div>
                </div>
            </van-tab>
        </van-tabs>

        <!-- 底部 -->
        <GoodsAction :arrPre="arrPre"></GoodsAction>
    </div>
</template>

<script>
import { Toast } from 'vant';

import GoodsAction from '@/components/xn/HomeCom/Goods/GoodsAction.vue';
import List from '@/components/xn/HomeCom/Goods/List.vue'
export default {
    name: 'detail',
    props: {
        title: {
            type: String
        },
    },
    data() {
        return {
            // 三点下拉
            showPopover: false,
            actions: [{ text: '首页' }, { text: '分类搜索' }, { text: '购物车' }, { text: '我的京东' }, { text: '浏览记录' }],
            // 商品预览
            current: 0,
            arrPre: {},
            // 地址弹窗
            show: false,
            actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
            // 单选框
            radio: '1',
            // tab
            active: 0,
            arrList2: [],
            tokenObj: ''

        };
    },
    components: {
        GoodsAction,
        List,

    },
    methods: {
        // tab
        onClick(title) {
            Toast(title);
        },
        //商品预览
        onChange(index) {
            this.current = index;
        },
        //获取猜你喜欢,传img1,
        async getLike() {
            const { data: res } = await this.$http.get('http://118.178.238.19:3001/api/pro/recommendlist?count=3')
            this.arrList2 = res.data
        },
        // 点击 获取猜你喜欢传递的数据
        goDetail2(v) {
            this.arrPre = v
            // sessionStorage.setItem('objLike', JSON.stringify(this.arrPre))
            // 回顶部
            scrollTo({ top: 0, behavior: 'smooth' })

        },
    },
    async mounted() {
        this.getLike()
        // 获取首页瀑布流传递的数据
        if (this.$route.query.delList) {
            this.arrPre = JSON.parse(this.$route.query.delList)
        };

       
        },
}
</script>

<style lang="scss" scoped>
.select_top {
    /* 弹性布局后重新设置宽高 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: .88rem;
    position: fixed;
    z-index: 999;
}

/* title中间tab */

::v-deep .van-tabs__wrap {
    width:7rem;
    margin: auto;
    margin-left: 24px;

}

.select_top .title {
    width: 4.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

::v-deep .van-button--primary {
    background: transparent;
    border: none;
}

// .router-link-active {
//     width: .8rem;
//     height: .8rem;
//     text-align: center;
//     background: #fff;
// }


// .router-link-active span {
//     display: inline-block;
//     width: .3rem;
//     height: .3rem;
//     margin-top: .2rem;
//     background: url("") no-repeat 50%
// }

.select_top .arrow{
        display: inline-block;
        text-align: center;
            width: .8rem;
            height: .88rem;
            background:#fff url("") no-repeat center/50%
}
.van-popover__wrapper {
    width: .88rem;
    background: #fff;
}

.van-popover__wrapper::v-deep .van-button::before {
    display: none;
}

.van-popover__wrapper.van-button--normal {
    padding: 0 0;
}

.van-popover__wrapper .van-button__content {
    width: .6rem;
    height: .6rem;
    text-align: center;
    padding-top: .1rem;
    margin-right: 0;
    background: #fff;
}

.van-popover__wrapper .van-button__content span {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    background: url() no-repeat center/80% 28%
}

/* 商品预览 */
.custom-indicator {
    position: absolute;
    color: #fff;
    right: .1rem;
    bottom: .1rem;
    padding: .06rem .2rem;
    font-size: .32rem;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.2);
}

::v-deep .van-swipe__track {
    background: antiquewhite;
    height: 7.5rem;
    width: 7.5rem !important;
}

.van-tab__pane {
    margin-bottom: .3rem;
}

.van-swipe-item img {
    width: 100%;
}

/* 商品详情 */
.info {
    height: 4rem;
    background: #fff;
}

.info .price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: .7rem;
    padding: .24rem .36rem;
    margin-bottom: .3rem;
}

.info .price>p {
    font-size: .36rem;
    color: #f2270c;
}

.info .price>p>span {
    font-size: .6rem;
}

.info .price>div {
    display: flex;
    width: 1.8rem;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    font-size: .24rem;
}

.price>div p {
    display: flex;
    flex-direction: column;
    height: .16rem;
    margin-top: -0.4rem;
}

.price>div img {
    height: .44rem;
    width: .44rem;
}

.txt {
    height: .4rem;
    margin-bottom: .24rem;
    line-height: .36rem;
}

.txt img {
    width: .88rem;
    height: .26rem;
    margin-right: .2rem;
}

.txt span:nth-child(3) {
    display: inline-block;
    margin-left: 2rem;
    font-weight: bold;
    color: #f2270c;
    font-size: .32rem;
}

.txt2 {
    height: .84rem;
    font-size: .32rem;
    color: #262626;
    font-weight: bold;
    margin-bottom: 12px;
}

.txt2 img {
    width: 24px;
    height: 13px;
    margin-right: 10px;
}

.rank {
    background: url(https://m.360buyimg.com/rank/jfs/t1/220210/4/8105/116413/61bc3900E23032be5/9c15402c352382e4.png) no-repeat center;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.rank img:nth-child(1) {
    width: 65px;
    height: 25px;
}

.rank img:nth-child(3) {
    width: 12px;
    height: 12px;
}

.rank span {
    width: 247px;
    padding: 0 4px;
    color: #FA2C19;
    font-size: 12px;
    text-align: left;
}

/* address */
.address {
    background: #fff;
    margin-top: 0.2rem;
}

.van-cell__value {
    text-align: center;
    flex: 3;
}

/*地址弹窗 */
.area {
    padding: .32rem .32rem 3.2rem;
}

.van-action-sheet {
    height: 9.54rem;
}

.van-radio {
    margin-bottom: .6rem;
}

.van-button--round {
    width: 7.1rem;
    margin-top: -0.14rem;
    text-align: center;
    position: absolute;
    bottom: .26rem;
}

.like {
    margin-top: 0.2rem;
    background: #fff;
}

.list {
    width: 7rem;
    margin: auto;
    column-count: 2;
    column-gap: .13rem;
    margin-top: .5rem;
    font-size: .26rem;
    line-height: .4rem;
}

.like p {
    font-size: .32rem;
    font-weight: bold;
    margin-left: .3rem;
}
</style>